<template>
  <div class="activity-edit">
    <h2 class="title">修改店铺活动</h2>
    <div class="box">
      <div class="wrapper">
        <el-form ref="form" label-position="right" label-width="140px">
          <el-form-item class="name" prop="name" label="活动名称：">
            <el-input
              v-model="form.name"
              clearable
              class="name-ipt"
              size="medium"
              maxlength="20"
              placeholder="请输入活动名称"
            />
          </el-form-item>
          <el-form-item prop="type" label="活动类型：">
            <el-select v-model="form.type" placeholder="请选择活动类型" size="medium">
              <el-option label="折扣" value="02200001" />
            </el-select>
            <el-form-item v-if="form.type === '02200001'" class="off" label="折扣力度：">
              <el-input
                v-model="form.disCount"
                clearable
                size="medium"
                maxlength="3"
                placeholder="请输入活动折扣"
              /> <span>折</span>
            </el-form-item>
          </el-form-item>
          <el-form-item label="活动时间：">
            <el-date-picker
              v-model="date"
              type="datetimerange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item class="upload-box" prop="imageWeb" label="活动图片(电脑端)：">
            <img :src="qnPath(form.imageWeb)" style="width: 400px; height: 90px">
            <!-- <el-image
              style="width: 400px; height: 90px"
              :src="qnPath(form.imageWeb)"
              fit="fill"
            /> -->
            <image-upload :size="3072" imgname="电脑版广告图片" tip="该图片用于电脑端店铺首页的活动展示，建议尺寸1200PX*270PX" @onSuccess="pcBannerSuc">
              <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
            </image-upload>
          </el-form-item>
          <el-form-item class="upload-box" prop="imageApp" label="活动图片(手机端)：">
            <img :src="qnPath(form.imageApp)" style="width: 300px; height: 100px">
            <!-- <el-image
              style="width: 300px; height: 100px"
              :src="qnPath(form.imageApp)"
              fit="fill"
            /> -->
            <image-upload :size="3072" imgname="移动版广告图片" tip="该图片用于移动端店铺首页的活动展示，建议尺寸750PX*260PX" @onSuccess="mobileBannerSuc">
              <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
            </image-upload>
          </el-form-item>
          <!-- 商品 -->
          <el-form-item class="pdts" label="活动商品：">
            <div class="pdts-wrapper">
              <div><el-button type="primary" icon="el-icon-plus" size="medium" plain @click="addPdts">添加活动商品</el-button></div>
              <table v-if="selectedPdts.length > 0" class="pdts-selected-table" align="left" border="0" cellpadding="0" cellspacing="0">
                <thead>
                  <tr>
                    <th>商品名称</th>
                    <th>分类</th>
                    <th>原价</th>
                    <th>活动价</th>
                    <th>库存</th>
                    <th>销量</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(pdt, index) in selectedPdts" :key="index">
                    <td>
                      <div>
                        <p class="img"><el-image style="width: 80px; height: 80px" :src="qnPath(pdt.image.split(',')[0])" fit="fit" /></p>
                        <div class="info">
                          <p class="name">{{ pdt.name }}</p>
                          <p class="id">ID：{{ pdt.mdseId }}</p>
                        </div>
                      </div>
                    </td>
                    <td>{{ pdt.typeValue }}</td>
                    <td>{{ pdt.unitPrice | fixedPrice }}</td>
                    <td class="price-red">{{ pdt.unitPrice * Number(form.disCount) / 10 | fixedPrice }}</td>
                    <td>{{ pdt.amount }}</td>
                    <td>{{ pdt.sales }}</td>
                    <td><el-link type="danger" :underline="false" @click="deleteSinglePdt(pdt)">删除</el-link></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-form-item>
          <el-form-item class="btns">
            <el-button @click="goBack">返 回</el-button>
            <el-button type="primary" @click="submitForm">确认修改</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 商品弹框 -->
      <template>
        <DialogPdts :dialogpdtsvisible="dialogPdtsVisible" :shopid="shopInfo.id" :selectedlist="selectedPdts" @ok="getSelectedPdts" @goBack="dialogPdtsVisible = false" />
      </template>
    </div>
  </div>
</template>
<script>
import DialogPdts from '../../components/DialogPdts';
import { getOneById } from '@/api/activity';
import ImageUpload from '@/components/ImagesUpload';
import { mapGetters } from 'vuex';
export default {
  name: 'ShopActivityEdit',
  components: {
    DialogPdts,
    ImageUpload
  },
  data() {
    return {
      id: '',
      form: {},
      date: [],
      selectedPdts: [],
      dialogPdtsVisible: false,
      updateCount: 0 // 页面更新次数
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  watch: {
    '$route'(to, from, next) {
      this.id = this.$route.params.id;
      this.getOneById(this.id);
    },
    date(newVal) {
      this.form.beginTime = newVal[0];
      this.form.finishTime = newVal[1];
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.getOneById(this.id);
  },
  beforeRouteLeave(to, from, next) {
    if (this.updateCount > 2) {
      if (from.path.includes('/activities/shop/edit')) {
        this.$confirm('即将离开当前页，请确定是否保存当前数据？', '离开当前页', {
          confirmButtonText: '保存',
          cancelButtonText: '不保存',
          type: 'warning'
        }).then(() => {
          // 提交变更
          next();
        }).catch(() => { next(); });
      } else { next(); }
    } else {
      next();
    }
  },
  updated() {
    this.updateCount = this.updateCount + 1;
  },
  methods: {
    pcBannerSuc(res) {
      this.form.imageWeb = res;
    },
    mobileBannerSuc(res) {
      this.form.imageApp = res;
    },
    addPdts() {
      if (!this.form.type || !this.form.disCount) {
        this.$message({
          message: '请先选择活动折扣类型',
          type: 'warning'
        });
        return;
      }
      this.dialogPdtsVisible = true;
    },
    goBack() {
      this.$router.go(-1);
    },
    submitForm() {},
    getSelectedPdts(list) {
      this.selectedPdts = list;
      this.dialogPdtsVisible = false;
    },
    // 删除已经选中的活动商品
    deleteSinglePdt(pdt) {
      this.selectedPdts.splice(this.selectedPdts.indexOf(pdt), 1);
    },
    getOneById(id) {
      new Promise((resolve, reject) => {
        getOneById({ id }).then(res => {
          this.form = res.data;
          this.selectedPdts = res.data.detail;
          this.date = [new Date(res.data.beginTime).getTime(), new Date(res.data.finishTime).getTime()];
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.activity-edit {
	font-size: $fontSizeBase;
	background-color: #fff;
	p{
		margin: 0
  }
  .off{
    display: inline-block;
    /deep/ .el-input{
      width: 70%;
    }
  }
}
@import '@/styles/shop-activity-add.scss';
.pdts-selected-table {
 td{
   padding: 15px;
    &:first-child{
      padding-right: 5px;
      width: 32%;
    }
    &.price-red{
      color: $errorColor;
    }
  }
}
</style>
